<template lang="pug">
  .clearfix
    Modal(
      width="1000"
      v-model="isShowCreateModal"
      title="新建入职模板"
      :closable="false"
      :mask-closable="false"
    )
      Form(ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="120")
        FormItem(label="模板名称：" prop="name"  :label-width="130")
          Input.input-has-border(v-model="formValidate.name" clearable)
        FormItem(label="适配合作类型：" prop="type"  :label-width="130")
          Select.input-has-border(v-model="formValidate.type"  placeholder="请选择" clearable style="width:200px")
            Option(v-for="(item, index) in typeOps" :value="item.key" :key="index") {{ item.value }}
      
      Table.beautiful-table(:columns="columns" :data="tableData" :stripe="true" ref="demoTable" max-height="300")
        template(slot-scope="{ row, index }" slot="name")
          Input.input-has-border(v-model="tableData[index].name" clearable disabled)
        template(slot-scope="{ row, index }" slot="isMust")
          i-switch(v-model="tableData[index].isRequired" :disabled="!tableData[index].canUpdateIsRequired")
            span(slot="open") 是
            span(slot="close") 否
        template(slot-scope="{ row, index }" slot="action")
          Icon.action-icon.mr-5(type="ios-arrow-up" @click="handleMoveUp(index)")
          Icon.action-icon.mr-5(type="ios-arrow-down" @click="handleMoveDown(index)")
          i-switch(v-model="tableData[index].enabled" size="large" :disabled="!tableData[index].canUpdateEnabled")
            span(slot="open") 启用
            span(slot="close") 禁用

      .clearfix(slot="footer")
        Button(type="text" @click="cancel") 取消
        Button(type="primary" @click="handleSubmit" :loading="!isCanSubmit") 确定
</template>

<script>
import { SysQuickEntryTemplateApi } from '../SysQuickEntryTemplate.api.js'
export default {
  name: '',

  props: {
  },

  data () {
    return {
      isShowCreateModal: false,
      isCanSubmit: true,
      formValidate: {
        id: '',
        name: '',
        type: '',
      },
      ruleValidate: {
        name: [
          { required: true, message: '模板名称不能为空', trigger: 'blur' }
        ],
        type: [
          { required: true, message: '适配合作类型不能为空', trigger: 'change' }
        ]
      },
      typeOps: [
        {key: '1', value: '人事代理'},
        {key: '2', value: '劳务派遣'},
        {key: '3', value: '劳务外包'},
        {key: '4', value: '灵活用工'},
      ],
      tableData: [],
      columns: [
        {
          title: '字段名称',
          dataIndex: 'name',
          key: 'name',
          slot: 'name'
        },
        {
          title: '是否必填',
          dataIndex: 'isMust',
          key: 'isMust',
          slot: 'isMust'
        },
        {
          title: '操作',
          dataIndex: 'action',
          key: 'action',
          slot: 'action'
        },
      ]
    }
  },

  watch: {
  },

  mounted () {
  },

  methods: {
    show () {
      this.isShowCreateModal = true
    },

    cancel () {
      console.log('关闭')
      this.isShowCreateModal = false
      this.$refs.formValidate.resetFields()
    },

    // 获取详情
    getModal(id) {
      SysQuickEntryTemplateApi.GetModel(id).then(resp => {
        console.log('%c getModal resp: ', 'color:red', resp)
        if (resp.data.success) {
          this.tableData = resp.data.data.details;
          Object.keys(this.formValidate).forEach(key => {
            this.formValidate[key] = resp.data.data[key]
          })
          this.formValidate.type = resp.data.data.type.toString()
        }
      })
    },

    // 复制
    getCopyModel(id) {
      SysQuickEntryTemplateApi.GetCopyModel(id).then(resp => {
        console.log('%c getModal resp: ', 'color:red', resp)
        if (resp.data.success) {
          this.tableData = resp.data.data.details;
          Object.keys(this.formValidate).forEach(key => {
            this.formValidate[key] = resp.data.data[key]
          })
          this.formValidate.type = resp.data.data.type.toString()
        }
      })
    },

    // 上移
    handleMoveUp (index) {
      console.log('上移:', index)
      if (index == 0) {
        return
      }
      this.swapItems(this.tableData, index, index - 1)
    },

    // 下移
    handleMoveDown (index) {
      console.log('下移: ', index)
      if (index == this.tableData.length - 1) {
        return
      }
      this.swapItems(this.tableData, index, index + 1)
    },

    // 交换数组元素
    swapItems (arr, index1, index2) {
      arr[index1] = arr.splice(index2, 1, arr[index1])[0]
      return arr
    },

    handleSubmit () {
      this.$refs.formValidate.validate((valid) => {
        if (valid) {
          const params = {
            ...this.formValidate,
            details: this.tableData
          }
          console.log('提交 params', params)
          SysQuickEntryTemplateApi.Save(params).then(resp => {
            console.log('%c submit resp: ', 'color:red', resp)
            if (resp.data.success) {
              this.$Message.success(resp.data.message)
              this.cancel()
              this.$emit('query')
            } else {
              this.$Message.error({
                content: resp.data.message,
                duration: 10,
                closable: true
              })
            }
          })
        }
      })
    },
  }
}
</script>

<style lang="less" scope>
.action-icon{
  width: 28px;
  height: 25px;
  line-height: 23px;
  color: #c5c8ce;
  background-color: #f7f7f7;
  border: solid 1px #dcdee2;
  text-align: center;
  font-size: 14px;
  border-radius: 3px;
  transition: all .3s;
  cursor: pointer;
  padding: 0;
  &:hover{
    color: #fff;
    background-color: #2d8cf0;
    border-color: #2d8cf0;
  }
}
</style>
